<template>
	<view class="m-b-30 box p-l-10 p-r-10 p-b-40">
		<view class="">
			
			<view class="main">
				<view class="flex row-right p-b-30 p-t-30" v-if="isFast" @click="fastSend">
					<view class="primary bold">快速重发</view>
					<view class="m-l-10">
						<u-icon name="play-right-fill" color="#df563b"></u-icon>
					</view>
				</view>
				<view class="address-content">
					
				
				<view v-for="(item,index) in addressList"  :key="item.id">
					<view class="bg-white p-l-25">
						<view class=" flex row-between " :class="index==0? 'add':'sub'" @click="OpenMap(index)">
							<!-- || ?'"':'' -->
							<view class="send-tap">
								<view class=""
									style="background-color: #27ae60;width: 25upx;height: 25upx;border-radius: 50%;"
									v-if="index==0">

								</view>
								<view class=""
									style="background-color:#e67e22;width: 25upx;height: 25upx;border-radius: 50%;"
									v-if="index>0 && index<addressList.length-1">
								</view>
								<view class="flex row-center white xxs"
									style="background-color: #df563b;width: 25upx;height: 25upx;border-radius: 50%;"
									v-if="index==addressList.length-1" @click.stop="addEnd">
									+
								</view>
								<!-- <image src="../../static/images/index-add.png  " mode="" v-if="index==0"></image>
								<image src="../../static/images/index-sub.png  " mode="" v-else></image> -->
							</view>
							<view>
								<view class="bold xs line-1" style="width: 400rpx;">
									{{item.name==null?'请输入地址去估价':item.name}}
								</view>
								<!-- <view class="comment bold xxs">联系人未填写</view> -->
							</view>
							<view class="" v-if="index!=0 && index!=addressList.length-1"
								@click.stop="delAddress(index)">
								<view class="del-icon">
									<u-icon name="close" size="12" color="#ededed"></u-icon>
								</view>
							</view>
							<view class="flex">
								<view class="select-map" @click.stop="openAddressBook">
									地址簿
									<!-- <image src="../../static/images/index-map.png" mode=""></image> -->
								</view>
							</view>
						</view>
						<view class="exchange" v-if="addressList.length-1 != index" @click="exChange(index)">
							<image src="../../static/images/index-exchange.png" mode="" class=""></image>
						</view>
					</view>

				</view>

</view>
				<!-- <view class="sub flex row-between">
					<view class="del-tap">
						<image src="../../static/images/index-sub.png" mode=""></image>
					</view>
					<view >
						<view class="bold xs primary">{{address[address.length-1].end_name==null?'请输入卸货地址去估价':address[address.length-1].end_name}} </view>
					</view>
					<view class="flex" @click="OpenMap(-1)">
						<view></view>
						<view class="map ">
							<image src="../../static/images/index-map.png" mode=""></image>
						</view>
					</view>
				</view> -->


				<!-- <view class="flex m-b-30 m-t-30" >
					<block v-if="isFast">
						<view class="flex  text-center save-item bold" v-for="item in list" :key="item.id" >
							<view >
								<image src="../../static/images/index_save.png" mode="" style="width: 20upx;height: 20upx;"></image>
							</view>
							<view style="color: #999;" class="xxs">
								{{item.name}}
							</view>
						</view>
					</block>
				</view> -->

			<view class="flex  p-l-20  p-b-40">
							<!-- <view class="flex m-r-10 time-item">
								<view>用车时间：</view>
								<view class="primary bold" >现在用车</view>
							</view>
							<view class="m-r-10 time-item">预约用车</view> -->
							<view class="time-item flex " @click="selectRoute">
								<view class="m-r-10">
									<image style="width: 40rpx;" src="../../static/images/if-map-pins.png" mode="widthFix">
									</image>
								</view>
								常用路线
							</view>
							<view class="time-item flex m-l-36 time-item-line" @click="addEnd">
								<view class="m-r-10">
									<u-icon name="plus-circle" size="40"></u-icon>
								</view>
								添加途经点
							</view>
						
						</view>

			</view>
	
			<view class="  p-t-20 p-b-20 m-t-48" v-if="total.price">
				<view class="flex row-between p-l-20 p-r-20" >
					<view   :style="type==1?'background-color:#FFF6F4  !important;':''" @click="selectCartype(1)"
						style="position: relative; width: 342upx;height: 160upx;line-height: 40upx;border: 1px solid rgba(232, 229, 229, 100);border-radius: 8upx;"
						class="flex text-center p-l-22 p-t-22 br10">
						<view class="left-content " >
							<view class="" :style="type==1?'color:#DF4720;':''">
								
						
							专车
						    <image v-show="type!=1" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/8541c15f-1618-41d0-8905-e534c9d9d0ca.png" mode="widthFix" style="width: 28rpx;"></image>
							 <image  v-show="type==1" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/509939a8-6346-4c82-a6d0-0b6e0f2738c8.png" mode="widthFix" style="width: 28rpx;"></image>
								</view>
								<view class="" style="text-decoration: line-through;font-size: 20rpx;" v-show="total.price!=total.couponprice">
									￥{{total.price}}
								</view>
						</view>
						<view class="p-t-20" style="align-self: flex-start;">
							<label class="radio">
								<radio value="" color="#DF4720" @click="radioClick" :checked="type==1?true:false"
									data-type="1" /><text></text>
							</label>
						</view>
						<view class="flex-1 ml10 text-center">
							<view class="flex col-baseline text-center bold" :style="type==1?'color:#DF4720;':''">
								<view class="xxs ">￥</view>
								<view class="  " style="font-size: 46rpx;">{{total.price==total.couponprice? total.price:total.couponprice}}</view>
								<view class="xxs">元</view>
							</view>
							<view class="text-left flex m-t-10" style="color: #7D7D7D;" @click.stop="opencoupon(1)">
								<view class="" style="width: 210rpx;" v-if="total.price==total.couponprice">
									暂无使用优惠券
								</view>
								<view class="flex-content row-between" style="width: 200rpx;"  :style="type==1?'color:#DF4720;':''" v-else>
								
								 <view class="">
								 	优惠卷
								 </view>
								 <view class="">
								 	 -{{total.couponmoney}}元
								 </view>
								</view>
								<view class="m-l-20 flex-content">
									<u-icon v-show="type==1"  name="play-right-fill" color="#df563b"></u-icon>
									<u-icon v-show="type!=1" name="play-right-fill" color="#7D7D7D "></u-icon>
								</view>
							</view>
						</view>
					
					</view>
					<view :style="type==2?'background-color:#FFF6F4  !important':''"  @click="selectCartype(2)"
						style="width: 342upx;height: 160upx;line-height: 40upx;border: 1px solid rgba(232, 229, 229, 100);border-radius: 8upx;margin-left: 10rpx; position: relative;"
						class="flex text-center p-l-22 p-t-22 br10">
						<view class="left-content " >
							<view class="" :style="type==2?'color:#DF4720;':''">
							顺风车
								</view>
								<view class="" style="text-decoration: line-through;font-size: 20rpx;" v-show="total_two.price!=total_two.couponprice">
									￥{{total_two.price}}
								</view>
						</view>
						<view class="p-t-20" style="align-self: flex-start;">
							<label class="radio">
								<radio value="" color="#DF4720" @click="radioClick" :checked="type==1?false:true"
									data-type="2" /><text></text>
							</label>
						</view>
						<view class="flex-1 ml10 text-center">
							<view class="flex col-baseline text-center bold" :style="type==2?'color:#DF4720;':''">
								<view class="xxs ">￥</view>
								<view class="" style="font-size: 46rpx;">{{total_two.price!=total_two.couponprice?total_two.couponprice:total_two.price}}</view>
								<view class="xxs">元</view>
							</view>
							<view class="text-left flex m-t-10" style="color: #7D7D7D;" @click.stop="opencoupon(2)">
								<view class="" style="width: 210rpx;" v-if="total_two.price==total_two.couponprice">
									暂无使用优惠券
								</view>
								<view class="flex-content row-between" style="width: 200rpx;"  :style="type==2?'color:#DF4720;':''" v-else>
								
								 <view class="">
								 	优惠卷
								 </view>
								 <view class="">
								 	 -{{total_two.couponmoney}}元
								 </view>
								</view>
								<view class="m-l-20 flex-content">
									<u-icon v-show="type==2"  name="play-right-fill" color="#df563b"></u-icon>
									<u-icon v-show="type!=2" name="play-right-fill" color="#7D7D7D "></u-icon>
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<!-- <view class="flex col-baseline">
					<view class=" xxl bold">{{total}}</view>
					<view class="xxs" >元</view>
				</view> -->
			</view>

			<view class="flex m-t-48" v-if="total.price">
				<view class="index-btn flex-1" @click="nowCar">
					现在用车
				</view>
				<view class="index-appoi" @click="appCar">
					预约
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GDMap from '@/js_sdk/amap-wx/amap-wx.130'
	export default {
		name: "index-send",
		data() {
			return {
				list: [{
						name: '免费5万货损险'
					},
					{
						name: '司机100%实名认证'
					},
					{
						name: '24小时下单'
					}
				],
				endInfo: {
					name: null
				},
				mapgd: '',
				startInfo: {},
				addressList: [{
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					name: null,
					is_start: 1
				}, {
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					name: null,
				}],
				type: 1
			};
		},
		props: {
			selectroute: {
				type: Object,
				default: () => {}
			},
			total: {
				type: Object,
				default: () => {}
			},
			total_two: {
				type: Object,
				default: () => {}
			},

			isFast: {
				type: Boolean,
				default: () => true
			},
			is_enough: {
				type: Boolean,
				default: () => true
			}
		},
		watch: {
			selectroute(newValue, oldValue) {
				this.addressList = [{
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					name: null,
					is_start: 1
				}, {
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					name: null,
				}]
					let adreeconnt=newValue.addressVal[0]
					this.addressList[0].latitude=adreeconnt.start_latitude
					this.addressList[0].longitude=adreeconnt.start_longitude
					this.addressList[0].city=adreeconnt.start_city
					this.addressList[0].province=adreeconnt.start_province
					this.addressList[0].district=adreeconnt.start_district
					this.addressList[0].name=adreeconnt.start_address
					this.addressList[1].latitude=adreeconnt.end_latitude
					this.addressList[1].longitude=adreeconnt.end_longitude
					this.addressList[1].city=adreeconnt.end_city
					this.addressList[1].province=adreeconnt.end_province
					this.addressList[1].district=adreeconnt.end_district
					this.addressList[1].name=adreeconnt.end_address
						this.$emit('computedMoneyFun')
			}
		
		},
		created() {
			this.mapgd = new GDMap.AMapWX({
				key: '364c1096e6b21c6e94ffaf5cc02e4d08'
			});
			this.getUserLocation();
			uni.$on("common_select",(item)=>{
				let res= item.addressVal[0]
				this.addressList[0].latitude=res.start_latitude
				this.addressList[0].longitude=res.start_longitude
				this.addressList[0].city=res.start_city
				this.addressList[0].province=res.start_province
				this.addressList[0].district=res.start_district
				this.addressList[0].name=res.start_address
				this.addressList[1].latitude=res.end_latitude
				this.addressList[1].longitude=res.end_longitude
				this.addressList[1].city=res.end_city
				this.addressList[1].province=res.end_province
				this.addressList[1].district=res.end_district
				this.addressList[1].name=res.end_address
				this.$emit('computedMoneyFun')
			})
			
		},
		beforeDestroy() {
			uni.$off("common_select")
		},
		methods: {
			opencoupon(type){
				if(type!=this.type) return
				if(this.type==1){
					uni.navigateTo({
						url:"bundle/pages/exchange_coupon/exchange_coupon?cartype=1&&couponid="+this.total.couponId+"&&momey="+this.total.price
					})
				}else if(this.type==2){
					uni.navigateTo({
						url:"bundle/pages/exchange_coupon/exchange_coupon?cartype=2&&couponid="+this.total_two.couponId+"&&momey="+this.total_two.price
					})
				}
			},
			openAddressBook(){
				uni.navigateTo({
					url:"/bundle/pages/address_book/address_book"
				})
			},
			selectCartype(type){
				this.type=type
				this.$emit("changcartype",type)
			},
			selectRoute() {
				uni.navigateTo({
					url: "bundle/pages/common_route/common_route"
				})
			},
			radioClick(e) {
				let type = e.currentTarget.dataset.type;
				if (type == 1) {
					this.type = type;
				}

				if (type == 2 && this.is_enough) {
					this.type = type;
				} else if (type == 2 && !this.is_enough) {
					this.$toast('未满足最低起步里程')
				}

			},
			appCar() {
				this.$emit('appCar')
			},
			fastSend() {
				uni.navigateTo({
					url: '/bundle/pages/fat_order/fat_order'
				})
			},
			// 
			OpenMap(index) {
				//打开地图选择地点回调


				uni.chooseLocation({
					success: res => {
						this.addressList[index].latitude = res.latitude;
						this.addressList[index].longitude = res.longitude;
						this.addressList[index].name = res.name;
						this.chooseMap(res.longitude, res.latitude, index)

						this.$forceUpdate();

					}
				})
			},

			exChange(index) {
				let middle = this.addressList[index];
				this.addressList[index] = this.addressList[index + 1]
				this.addressList[index + 1] = middle;
				this.$forceUpdate();
				this.$emit('computedMoneyFun')
			},
			addEnd() {
				this.addressList.splice(this.addressList.length - 1, '', {
					latitude: '',
					longitude: '',
					province: '',
					city: '',
					district: '',
					name: null,
				})
			
			},
			nowCar() {
				// this.$emit('computedMoneyFun')
				this.$emit('nowCar')
			},
			getUserLocation() {

				uni.getLocation({
					type: 'gcj02',
					success: res => {
						var latitude = res.latitude
						var longitude = res.longitude
						this.initMap(longitude, latitude)

					},
					fail: err => {
					
						uni.navigateTo({
							url: '/pages/area_list/area_list?unAddress=1'
						})

					}
				})
			},
			//获取到经纬度回调
			async chooseMap(longitude, latitude, index) {

				const data = await this.succMap(longitude, latitude);
			
				this.addressList[index].province = data[0].regeocodeData.addressComponent.province;
				this.addressList[index].city = data[0].regeocodeData.addressComponent.city.length == 0 ? '直辖市' : data[
					0].regeocodeData.addressComponent.city;
				this.addressList[index].district = data[0].regeocodeData.addressComponent.district;

				this.$forceUpdate();
				this.$emit('computedMoneyFun')
				// console.log(this.addressList)
			},
			async initMap(longitude, latitude) {
				const data = await this.succMap(longitude, latitude);

			
				let city = data[0].regeocodeData.addressComponent.city
				let obj = {
					latitude: data[0].latitude,
					longitude: data[0].longitude,
					province: data[0].regeocodeData.addressComponent.province,
					city: data[0].regeocodeData.addressComponent.city.length == 0 ? '直辖市' : data[0].regeocodeData
						.addressComponent.city,
					district: data[0].regeocodeData.addressComponent.district,
					name: data[0].desc || '输入起始地址',
					is_start: 1
				}

				let cloneObj = this.$u.deepClone(obj);

				this.addressList[0] = cloneObj;
				this.$store.commit('setSwiperAddress', obj)

				this.$forceUpdate();


				if (!!data[0].regeocodeData.addressComponent.city) {
					this.$emit('changeCity', city)
				}
			},
			delAddress(index) {
				this.addressList.splice(index, 1);
				this.$emit('computedMoneyFun')
			},
			succMap(longitude, latitude) {
				//输入经纬度获取地区名字地址
				return new Promise((resolve, reject) => {
					this.mapgd.getRegeo({
						location: `${longitude},${latitude}`,
						success: res => {
							resolve(res);
						},
						fail: err => {
							reject(err)
						
						}
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.left-content{
		font-size: 24rpx;
		color: #7D7D7D ;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}
	.select-map{
		color:  #a9a9a9;
		position: relative;
	}
	.select-map::after{
		content: "";
		position: absolute;
		left: -18rpx;
		width: 2rpx;
		height: 38rpx;
		background-color: #a9a9a9;
	}
	
	.time-item-line {
		position: relative;
	}

	.time-item-line::after {
		content: "";
		width: 2rpx;
		height: 34rpx;
		position: absolute;
		top: 0rpx;
		left: -20rpx;
		background-color: #C8C8C8;
	}

	.box {
		// background-color: rgb(251, 245, 244);
	}

	.del-icon {
		background-color: #A5A5A5;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.index-btn {
		background-color: $-color-primary;
		color: #fff;
		padding: 20rpx 0;
		text-align: center;
		width: 420rpx;
		margin-bottom: 20rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.index-appoi {
		width: 30%;
		background-color: #FF9900;
		color: #fff;
		padding: 20rpx 0;
		text-align: center;
		margin-bottom: 20rpx;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}
	.address-content{
		box-shadow: 10upx 10upx 10upx 10upx #ededed;
		
	}

	.main {
		border-radius: 20upx;
		background-image: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/405e3723-4b7d-47e6-9005-f9ddfb9976b9.png);
		background-size: cover;
		background-repeat: no-repeat;
		padding: 10rpx;
		// box-shadow: 10upx 10upx 10upx 10upx #ededed;

		.add {
			position: relative;
			padding: 30upx 30upx 26upx 55upx;
			height: 110upx;
			border-radius: 20upx;
			// border: 1upx $-color-primary solid;

			.send-tap {
				position: absolute;
				// top: 0;
				left: 0;

				image {
					width: 60upx;
					height: 60upx;
				}

			}

			.comment {
				color: #a0a0a0;
			}

			.map {
				image {
					width: 35upx;
					height: 35upx;
				}
			}
		}

		.sub {
			position: relative;
			padding: 30upx 30upx 26upx 55upx;
			border-radius: 20upx;
			// background-color: #f3f4f5;
			height: 110upx;

			.send-tap {
				position: absolute;
				// top: 0;
				left: 0;

				image {
					width: 60upx;
					height: 60upx;
				}

			}

			.comment {
				color: #a0a0a0;
			}

			.map {
				image {
					width: 35upx;
					height: 35upx;
				}
			}
		}

		.exchange {

			// margin-top: 14upx;
			// margin-bottom: 14upx;
			image {
				width: 42upx;
				height: 42upx;
			}
		}


	}

	.save-item {
		flex: 1;

		&:first-child {
			margin-left: 18upx;
		}

		&:last-child {
			justify-content: center;
		}

		&:nth-child(2) {
			flex: 1.5;
			justify-content: center;
		}
	}

	.time-item {
		margin-top: 20upx;
		color: #b0b0b0;
	}
</style>
